Ext.define('MyApp.controller.Main', {
    
    extend  : 'Ext.app.Controller',
    views   : ['Home', 'Song', 'Contact', 'SongDetail'],
    models  : ['Song'],
    
    refs : [
        {
            ref      : 'viewport',
            selector : 'myapp-viewport > panel'
        },
        {
            ref      : 'listsong',
            selector : 'myapp-songpanel'
        }
    ],
    
    init: function() {
        this.control({
            'myapp-songpanel' : {
                itemtap: 'handleSongDetail'
            }
        });
    },
    
    handleSongDetail: function(record, index) {
        
        var $this = this,
            list = $this.getListsong(),
            viewport = $this.getViewport(),
            
            newCard    = viewport.add({
                xtype  : 'myapp-songdetail',
                data   : record.getStore().getAt(index).data
            });
            
        list.deselect(record);
        viewport.setActiveItem(newCard).show();
    }
});